<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery下拉选择框美化插件select-mania|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/select-mania.css" rel="stylesheet" type="text/css">
    <link href="css/themes/select-mania-theme-darkblue.css" rel="stylesheet" type="text/css">
    <link href="css/themes/select-mania-theme-green.css" rel="stylesheet" type="text/css">
    <link href="css/themes/select-mania-theme-orange.css" rel="stylesheet" type="text/css">
    <link href="css/themes/select-mania-theme-red.css" rel="stylesheet" type="text/css">
    <link href="css/themes/select-mania-theme-square.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .container {
            margin: 150px auto;
            max-width: 680px;
        }
    </style>
</head>
<body>
<div class="htmleaf-container">
    <header class="htmleaf-header">
        <h1>jQuery下拉选择框美化插件select-mania <span>Themeable jQuery Select Box Enhancement Plugin</span></h1>
        <div class="htmleaf-links">
            <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家"
               target="_blank"><span> jQuery之家</span></a>
            <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline"
               href="http://www.htmleaf.com/jQuery/Form/201712084869.html" title="返回下载页"
               target="_blank"><span> 返回下载页</span></a>
        </div>
    </header>
    <div class="container">
        <h1>jQuery select-mania 插件示例演示</h1>
        <h2>Square+Red Theme</h2>
        <select class="demo-1">
            <option value="sx">初中数学</option>
            <option value="yw">初中语文</option>
            <option value="yy">初中英语</option>
            <option value="wl">初中物理</option>
        </select>
        <h2>Darkblue + Large</h2>
        <select class="demo-2">
            <option value="sx">初中数学</option>
            <option value="yw">初中语文</option>
            <option value="yy">初中英语</option>
            <option value="wl">初中物理</option>
        </select>
        <h2>Orange + Medium</h2>
        <select class="demo-3">
            <option value="sx">初中数学</option>
            <option value="yw">初中语文</option>
            <option value="yy">初中英语</option>
            <option value="wl">初中物理</option>
        </select>
        <h2>Green + No Controls</h2>
        <select class="demo-4">
            <option value="sx">初中数学</option>
            <option value="yw">初中语文</option>
            <option value="yy">初中英语</option>
            <option value="wl">初中物理</option>
        </select>
        <h2>带图标的optgroup</h2>
        <select class="demo-5">
            <optgroup data-icon="fa fa-user" label="Group">
                <option value="1" data-icon="fa fa-weixin">微信</option>
                <option value="2" data-icon="fa fa-weibo">微博</option>
                <option value="4" data-icon="fa fa-qq">QQ</option>
                <option value="5" data-icon="fa fa-facebook">Facebook</option>
                <option value="6" data-icon="fa fa-github">github</option>
            </optgroup>
        </select>
    </div>
    <div class="related">
        <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
        <a href="http://www.htmleaf.com/jQuery/Form/201608023812.html">
            <img src="related/1.jpg" width="300" alt="基于Tether的select下拉选择框美化插件"/>
            <h3>基于Tether的select下拉选择框美化插件</h3>
        </a>
        <a href="http://www.htmleaf.com/jQuery/Form/201605093444.html">
            <img src="related/2.jpg" width="300" alt="超酷select选择下拉框美化jQuery插件"/>
            <h3>超酷select选择下拉框美化jQuery插件</h3>
        </a>
    </div>
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/select-mania.js"></script>
<script type="text/javascript">
    $('.demo-1').selectMania({
        size: 'small',
        themes: ['square', 'red'],
        placeholder: 'Please select me!',
        removable: true,
        search: true,
    });
    $('.demo-2').selectMania({
        size: 'large',
        themes: ['darkblue'],
        placeholder: 'Please select me!',
        removable: true,
        search: true
    });
    $('.demo-3').selectMania({
        themes: ['orange'],
        placeholder: 'Please select me!',
        removable: true,
        search: true
    });
    $('.demo-4').selectMania({
        themes: ['green'],
        placeholder: 'Please select me!'
    });
    $('.demo-5').selectMania({
        size: 'small',
        themes: ['square', 'blue'],
        placeholder: 'Please select me!',
        removable: true,
        search: true,
    });
</script>
</body>
</html>